<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="swiper-tab">
			<view :class="'tab-item ' + (currentTab == 0 ? 'on' : '')" data-current="0" @tap="swichNav">园区报修</view>
			<view :class="'tab-item ' + (currentTab == 1 ? 'on' : '')" data-current="1" @tap="swichNav">报修记录</view>
		</view>

		<!-- 内容主体 -->
		<swiper class="swiper" :current="currentTab" duration="200" @change="swiperChange">
			<swiper-item class="swiper-item">
				<!-- 报修类型 picker -->
				<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 75rpx; margin-top: 30rpx">
					<view style="color: #000; font-size: 30rpx; margin-left: 20rpx">报修类型：</view>
					<picker style="flex-grow: 1" mode="selector" header-text="报修类型" :range="repair_type" :value="repair_index" @change="onPickerChange">
						<view style="color: #000; font-size: 30rpx; margin-left: 30rpx; flex-grow: 1">{{ repair_type[repair_index] }}</view>
					</picker>
					<image src="/static/assets/arrow_r.png" style="width: 18rpx; height: 24rpx; margin-right: 20rpx"></image>
				</view>

				<view class="divider"></view>

				<!-- 门面号码 -->
				<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 75rpx; margin-top: 30rpx" @tap="onRoomNum">
					<view style="color: #000; font-size: 30rpx; margin-left: 20rpx">门面号码：</view>
					<view style="color: #000; font-size: 30rpx; margin-left: 30rpx; flex-grow: 1">{{ currRoom.name }}</view>
					<image src="/static/assets/arrow_r.png" style="width: 18rpx; height: 24rpx; margin-right: 20rpx"></image>
				</view>

				<view class="divider"></view>

				<view style="color: #000; font-size: 30rpx; margin-left: 20rpx; margin-top: 30rpx">报修描述：</view>

				<!-- 报修描述输入框 -->
				<view style="display: flex; flex-direction: row">
					<textarea class="repair_desc" :placeholder="desc_holder" value="" maxlength="100" @input="onInput" />
				</view>

				<!-- 上传图片 -->
				<view style="display: flex; flex-direction: column; margin-top: 30rpx; display: none">
					<view style="color: #999; font-size: 30rpx; margin-bottom: 20rpx; margin-left: 20rpx">上传图片(最多3张)</view>
					<view style="display: flex; flex-direction: row; margin-left: 20rpx">
						<!-- 第1张图 -->
						<view class="img_container" @tap="onImg1">
							<block v-if="util.isNull(img_list[0])">
								<!-- 加号图片 -->
								<image style="width: 60rpx; height: 60rpx" src="/static/assets/repair_add_img.png"></image>
							</block>
							<block v-else>
								<image style="width: 150rpx; height: 150rpx" mode="aspectFill" :src="img_list[0]"></image>
							</block>
						</view>

						<!-- 第2张图 -->
						<view class="img_container" @tap="onImg2">
							<block v-if="util.isNull(img_list[1])">
								<!-- 加号图片 -->
								<image style="width: 60rpx; height: 60rpx" src="/static/assets/repair_add_img.png"></image>
							</block>
							<block v-else>
								<image style="width: 150rpx; height: 150rpx" mode="aspectFill" :src="img_list[1]"></image>
							</block>
						</view>

						<!-- 第3张图 -->
						<view class="img_container" @tap="onImg3">
							<block v-if="util.isNull(img_list[2])">
								<!-- 加号图片 -->
								<image style="width: 60rpx; height: 60rpx" src="/static/assets/repair_add_img.png"></image>
							</block>
							<block v-else>
								<image style="width: 150rpx; height: 150rpx" mode="aspectFill" :src="img_list[2]"></image>
							</block>
						</view>
					</view>
				</view>

				<!-- 联系信息 -->
				<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 75rpx; margin-top: 30rpx">
					<view style="color: #000; font-size: 30rpx; margin-left: 20rpx">联系电话：</view>
					<input style="font-size: 30rpx; flex-grow: 1; margin-left: 30rpx" placeholder="请输入手机号" :value="phone" maxlength="18" type="number" @input="onInputPhone" />
				</view>

				<view class="divider"></view>

				<view class="btn_0" @tap="reqAddRepair">提交报修</view>

				<!-- 点击下面这句话出现底部弹框 -->
				<!-- <view bindtap="clickme">点击我可以看到底部弹框的出现</view> -->
				<!-- 屏幕背景变暗的背景 -->
				<view class="commodity_screen" @tap="hideModal" v-if="showModalStatus"></view>
			</swiper-item>

			<swiper-item class="swiper-item-2">
				<scroll-view style="height: 100%" :scroll-y="true">
					<!-- 报修列表 -->
					<view class="repair_item" @tap="onRepairClick" :data-index="index" v-for="(item, index) in repair_list" :key="index">
						<!-- 报修类型 状态 -->
						<view style="display: flex; flex-direction: row; justify-content: space-between; background-color: #09d295; width: 100%">
							<view style="flex-grow: 1; margin-left: 20rpx; line-height: 66rpx; color: white; font-size: 30rpx">报修类型：{{item.device_name}}</view>
							<view style="margin-right: 20rpx; line-height: 66rpx; color: white; font-size: 30rpx">已提交</view>
						</view>

						<!-- 定位图标 房间名 -->
						<view style="display: flex; margin-top: 10rpx; justify-content: space-between; width: 100%">
							<image src="/static/assets/house_16.png" style="width: 26rpx; height: 32rpx; margin: 16rpx 0 0 20rpx;"></image>
							<view class="item_name">{{ item.group.name || '未知房间' }}</view>
						</view>

						<!-- 报修描述 -->
						<view style="display: flex; margin-top: 10rpx; justify-content: space-between; width: 100%">
							<image src="/static/assets/repair_ic_1.png" style="width: 26rpx; height: 34rpx; margin-left: 20rpx; margin-top: 16rpx"></image>
							<view class="item_name">{{ item.desc || '无详情' }}</view>
						</view>

						<view style="display: flex; flex-direction: row; width: 100%">
							<view style="background-color: #f0f0f0;height: 1rpx; flex-grow: 1;margin: 20rpx 20rpx 0 20rpx;"></view>
						</view>

						<!-- 电话 时间 -->
						<view style="display: flex; margin-top: 10rpx; justify-content: space-between; width: 100%">
							<view style="flex-grow: 1; margin-left: 20rpx; line-height: 66rpx; color: #999; font-size: 26rpx">电话:{{ item.mobile || '未填写' }}</view>
							<view style="margin-right: 20rpx; line-height: 66rpx; color: #999; font-size: 26rpx">{{ item.create_time }}</view>
						</view>
					</view>

					<view v-if="!repair_list || repair_list.length <= 0" style="color: #ccc;width: 100%;text-align: center;line-height: 50vh;">暂无数据~</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script module="util" lang="wxs" src="@/utils/util.wxs"></script>
<script>
	const app = getApp() // 获取应用实例
	const util = require('../../../utils/util')
	import { getRepairList, postAddRepair } from '../../../utils/http/api'
	export default {
		data() {
			return {
				// tab切换
				currentTab: 0,

				// 报修描述hint
				desc_holder: '请写下您的报修内容，有助于我们工作人员快速解决问题。',
				// 报修类型
				repair_type: ['水管故障', '电器故障', '门窗故障', '墙面故障', '地面故障', '其他问题'],
				// 报修类型的索引
				repair_index: 0,
				// 跳转到我的房间页面获取到的房间信息
				currRoom: { name: '' },
				// desc 记录报修描述
				desc: '',
				// 记录点击的图片索引
				img_index: 0,
				// 选择的图片列表
				img_list: ['', '', ''],
				// 联系手机号
				phone: '',
				// 报修记录列表
				repair_list: [],

				animationData: '',
				showModalStatus: false
			}
		},
		onLoad: function(options) {
			let mobile = uni.getStorageSync('mobile');
			this.setData({ phone: mobile })
			this.reqRepairList()
		},
		methods: {
			// 切换导航
			swichNav(e) {
				var that = this;
				if (this.currentTab === e.target.dataset.current) {
					return false
				} else {
					that.setData({ currentTab: e.target.dataset.current })
				}
			},

			// 滑动切换
			swiperChange: function(e) {
				this.setData({ currentTab: e.detail.current })
			},

			// 报修类型picker
			onPickerChange: function(e) {
				let that = this;
				that.setData({ repair_index: e.detail.value })
			},

			// 点击选择门面号码
			onRoomNum(e) {
				// 跳转到我的房间页面获取房间信息
				util.navigateTo('/pages/charge/house/my_house/my_house?from=1');
			},

			// 监听:输入的报修描述
			onInput(e) {
				this.setData({ desc: e.detail.value })
			},

			// 监听:输入的联系方式
			onInputPhone(e) {
				this.setData({ phone: e.detail.value })
			},

			// 请求报修记录列表
			async reqRepairList() {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await getRepairList({ page: '1', limit: '999999', token: app.globalData.gl.token })
				uni.stopPullDownRefresh();
				if (code == '1') {
					this.setData({ repair_list: data.data })
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

			// 请求添加报修
			reqAddRepair() {
				let that = this;
				let repType = this.repair_type[this.repair_index]; // 报修类型
				if (util.isNull(repType)) {
					uni.showToast({ title: '请选择报修类型', icon: 'none' })
					return
				}
				let roomId = this.currRoom.id;
				if (util.isNull(roomId)) {
					uni.showToast({ title: '请选择房间', icon: 'none' })
					return
				}
				if (util.isNull(this.desc)) {
					uni.showToast({ title: '请输入报修描述', icon: 'none' })
					return
				}
				if (util.isNull(this.phone)) {
					uni.showToast({ title: '请输入联系电话', icon: 'none' })
					return
				}
				let imgStr = ''
				for (let i = 0; i < this.img_list.length; i++) {
					let url = this.img_list[i];
					if (!util.isNull(url)) {
						imgStr += ','
						imgStr += url
					}
				}
				if (!util.isNull(imgStr) && imgStr.startsWith(',')) {
					imgStr = imgStr.substring(1)
				}
				uni.showModal({
					title: '提示',
					content: '是提交该报修？',
					async success(res) {
						if (res.confirm) {
							// 点击确定
							uni.showLoading({ title: '处理中', mask: true })
							// let token = util.isLogin()
							let { code, msg, data } = await postAddRepair({
								token: app.globalData.gl.token,
								house_id: roomId,
								device_name: repType,
								desc: that.desc,
								image: imgStr,
								mobile: that.phone
							})
							uni.stopPullDownRefresh();
							if (code == '1') {
								uni.showModal({
									title: '提示',
									content: msg,
									showCancel: false,
									success(res) {
										if (res.confirm) {
											uni.navigateBack()
										}
									}
								})
							} else {
								uni.showToast({ title: msg, icon: 'error' })
							}
						}
					}
				})
			},

			// 点击拍照
			onCamera(e) {
				let camera = uni.createCameraContext()
				camera.takePhoto({
					quality: 'low',
					success(res) {
						console.log(res.tempImagePath)
					},
					fail(res) {
						console.log('拍照失败')
					}
				})
			},

			// 点击选择图片
			onSelImg(e) {
				uni.showToast({ title: '选择图片', icon: 'none' })
			},

			// 点击取消
			onCancel(e) {
				this.hideModal()
			},

			//点击我显示底部弹出框
			clickme() {
				this.showModal()
			},

			// 显示对话框
			showModal() {
				// 显示遮罩层
				var animation = uni.createAnimation({ duration: 200, timingFunction: 'linear', delay: 0 })
				this.animation = animation
				animation.translateY(300).step()
				this.setData({ animationData: animation.export(), showModalStatus: true })
				setTimeout(
					function() {
						animation.translateY(0).step()
						this.setData({ animationData: animation.export() })
					}.bind(this), 200
				)
			},

			// 隐藏对话框
			hideModal() {
				// 隐藏遮罩层
				var animation = uni.createAnimation({ duration: 200, timingFunction: 'linear', delay: 0 })
				this.animation = animation
				animation.translateY(300).step()
				this.setData({ animationData: animation.export() })
				setTimeout(
					function() {
						animation.translateY(0).step()
						this.setData({ animationData: animation.export(), showModalStatus: false })
					}.bind(this), 200
				)
			},

			onRepairClick() {

			}
		}
	};
</script>
<style>
	page {
		width: 100%;
		height: 100%;
	}

	.page {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
	}

	.swiper-tab {
		display: flex;
		flex-direction: row;
		line-height: 80rpx;
	}

	.tab-item {
		flex-grow: 1;
		text-align: center;
		font-size: 30rpx;
		color: #999;
	}

	.on {
		color: #000;
		border-bottom: 5rpx solid #21c991;
	}

	.swiper {
		flex-grow: 1;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
	}

	.swiper-item-2 {
		display: flex;
		flex-direction: column;
	}

	.divider {
		background-color: #e5e5e5;
		margin: 10rpx 20rpx 0 20rpx;
		height: 1rpx;
	}

	/* 报修描述输入框 */
	.repair_desc {
		flex-grow: 1;
		text-align: top;
		height: 120rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #fafafa;
		border: solid;
		border-color: #ededed;
		border-radius: 5rxp;
		border-width: 2rpx;
	}

	.img_container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 150rpx;
		height: 150rpx;
		margin-right: 30rpx;
		border: solid;
		border-color: #ededed;
		border-radius: 20rxp;
		border-width: 2rpx;
	}

	.btn_0 {
		background-color: #25b785;
		margin-top: 120rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: white;
		font-size: 30rpx;
	}

	.commodity_screen {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.2;
		overflow: hidden;
		z-index: 1000;
		color: #fff;
	}

	/*对话框 */
	.commodity_attr_box {
		display: flex;
		flex-direction: column;
		/* height: 400rpx; */
		width: 100%;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 2000;
		background: #fff;
	}

	/* 拍照 选择 取消 */
	.sel_item {
		flex-grow: 1;
		color: #000;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.repair_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-width: 5rpx;
		border-color: #f0f0f0;
		border-style: solid;
		border-radius: 10rpx;
	}

	.item_name {
		height: auto;
		flex-grow: 1;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
		font-size: 30rpx;

		display: -webkit-box;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>